<template>
  <div>
    <div>
      <el-table
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        :data="supply" style="width: 100%">
        <el-table-column prop="id" label="序号" width="120"></el-table-column>
        <el-table-column prop="shop.shopName" label="商品名称"></el-table-column>
        <el-table-column prop="shop.type.name" label="商品类型"></el-table-column>
        <el-table-column prop="supplierPrice" label="供应价格"></el-table-column>
        <el-table-column label="操作">
          <template slot="header" slot-scope="scope">
            <el-button icon="el-icon-refresh-right" circle @click="o"></el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              type="warning"
              round
              @click="update(scope.row)"
            >修改
            </el-button>
            <div v-if="scope.row.isDelete==0">
              <b><label style="color: green;font-size: 15px">供应商品</label></b>
              <el-switch @change="changeisDelete($event,scope.row.id)"
                         v-model="scope.row.isDeleteBoolean"
                         active-color="#13ce66"
                         inactive-color="#ff4949">
              </el-switch>
            </div>
            <div v-if="scope.row.isDelete==1">
              <b><label style="color: red;font-size: 15px">取消供应</label></b>
              <el-switch @change="changeisDelete($event,scope.row.id)"
                         v-model="scope.row.isDeleteBoolean"
                         active-color="#13ce66"
                         inactive-color="#ff4949">
              </el-switch>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <component ref="Modification" is="Modification_of_commodity_supply"></component>
    </div>
  <div>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageno"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
  </div>
</template>

<script>
  import Modification_of_commodity_supply from "./Modification_of_commodity_supply";
    export default {
        name: "supply_of_goods_queryAll",
      data(){
          return{
            loading: true,
            pageno: 1,
            pagesize: 5,
            total: 1,
            supply:[],
          }
      },
      methods:{
          getdata(){
            var obj={
              loginUserId:sessionStorage.getItem("id"),
              pageno:this.pageno,
              pagesize:this.pagesize,
            }
            this.$axios.get("supplierSupplyOfGoods/supplierofgoods.action",{params:obj}).then(res=>{
              this.supply=res.data.records;
              this.total=res.data.total;
              this.loading=false;
            }).catch(error=>{this.$message.error(error)})
          },
        changeisDelete(value,id){
          console.log("val:"+value)
          console.log("id:"+id)
            let isDelete=value==true?"0":"1";
            let supplierSupplyOfGoods={
              id:id,
              isDelete:isDelete
            }
            this.$axios.put("supplierSupplyOfGoods/updatebyisDelete.action",supplierSupplyOfGoods).then(res=>{
              if (res.data.x==true){
                this.$message.success(res.data.msg);
                this.value=true;
              }else {
                this.$message.success(res.data.msg);
                this.value=false;
              }
              this.getdata();
            }).catch(error=>{
              this.$message.success(error);
            })
        },
        handleSizeChange(val) {
          //每页范围
          this.pagesize = val;
          this.getdata();
        },
        handleCurrentChange(val) {
          //当前页
          this.pageno = val;
          this.getdata();
        },
        o(){
            this.getdata()
        },
        update(row){
        this.$refs.Modification.Visible=true;
          this.$refs.Modification.supply.id=row.id;
          this.$nextTick(item=>{this.$refs.Modification.getdata();})
        }
      },
      created() {
          this.getdata()
      },
      components:{
        Modification_of_commodity_supply
      }
    }
</script>

<style scoped>

</style>
